<template>

  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card class=" user_card  ">
          <div slot="header">视频统计</div>
          <div id="pie_id" class="bar-ecaher" />
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-row :gutter="10">
          <el-card class=" user_card  ">
            <div slot="header">月度统计</div>
            <div id="bar1_id" class="echars_user" />
          </el-card>
        </el-row>
        <el-row :gutter="10">
          <el-card class=" user_card  ">
            <div slot="header">年度统计</div>
            <div id="bar2_id" class="echars_user" />
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import echarts from 'echarts'
import {
  getDatas
} from '@/api/stat'
export default {
  name: 'Page',
  data() {
    return {
      datainfo: []
    }
  },
  mounted() {
    // 在通过mounted调用即可
    this.echartsInit()
  },
  async created() {
    // this.getData()
    // setInterval(() => {
    this.echartsInit()
    // }, 10000)
  },
  methods: {
    // async getData() {
    //   let res = await getDatas(12)
    //   this.datainfo=res
    // },
    // 初始化echarts
    // getDatas(11).then(rest=>{
    //   console.log(rest)
    // })
    echartsInit() {
      getDatas(11).then(info => {
        // 柱形图
        // 因为初始化echarts 的时候，需要指定的容器 id='main'
        // this.$api.stat.info().then(res => {
        console.log(info.data.pie)
        echarts.init(document.getElementById('bar1_id')).setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          // title: {
          //   text: '总注册用户-300'
          // },
          backgroundColor: '#fffae8',
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['新增数量']
          },
          xAxis: [{
            type: 'category',
            data: info.data.yue.yuedate,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
            type: 'value',
            name: '总数',
            min: 0,
            max: Math.max(...info.data.yue.reg),
            interval: 1,
            axisLabel: {
              formatter: '{value} 部'
            }
          },
          {
            type: 'value',
            name: '时间',
            min: 1,
            max: 30,
            interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
          ],
          series: [
            {
              name: '新增',
              type: 'bar',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function(value) {
                  return value + ' 部'
                }
              },
              data: info.data.yue.reg
            }
          ]
        })
        echarts.init(document.getElementById('bar2_id')).setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          // title: {
          //   text: '总注册用户-300'
          // },
          backgroundColor: '#fffae8',
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['新增数量']
          },
          xAxis: [{
            type: 'category',
            data: info.data.year.yuedate,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
            type: 'value',
            name: '总数',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 部'
            }
          },
          {
            type: 'value',
            name: '时间',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
          ],
          series: [
            {
              name: '新增',
              type: 'bar',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function(value) {
                  return value + '部'
                }
              },
              data: info.data.year.reg
            }
          ]
        })
        echarts.init(document.getElementById('pie_id')).setOption({

          title: {
            text: '总视频 ' + (info.data.count) + '部',
            left: 'center'
          },
          backgroundColor: '#fffae8',
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [{
            name: '分类统计',
            type: 'pie',
            radius: '80%',
            data: [{
              value: info.data.pie.data[0],
              name: info.data.pie.menu[0]
            },
            {
              value: info.data.pie.data[1],
              name: info.data.pie.menu[1]
            },
            {
              value: info.data.pie.data[2],
              name: info.data.pie.menu[2]
            },
            {
              value: info.data.pie.data[3],
              name: info.data.pie.menu[3]
            },
            {
              value: info.data.pie.data[4],
              name: info.data.pie.menu[4]
            },
            {
              value: info.data.pie.data[5],
              name: info.data.pie.menu[5]
            },
            {
              value: info.data.pie.data[6],
              name: info.data.pie.menu[6]
            },
            {
              value: info.data.pie.data[7],
              name: info.data.pie.menu[7]
            },
            {
              value: info.data.pie.data[8],
              name: info.data.pie.menu[8]
            },
            {
              value: info.data.pie.data[9],
              name: info.data.pie.menu[9]
            }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
      })
    }
  }
}
</script>
<style scoped>
  .app-container {
    .permission-tree {
      margin-bottom: 30px;
      color: #fffae8;
    }

  }

  .user_card {
    background: #fffae8;
    width: auto;
    /* height: 30%; */
  }

  .echars_user {
    width: 100%;
    height: 200px;
  }

  .bar-ecaher {
    width: auto;
    height: 500px;
  }
</style>
